<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no">
		<title>test</title>
		<style type="text/css" media="screen">
			body {
				margin: 0;
			}
			
			ul {
				list-style: none;
				padding: 0;
			}
			
			li {
				height: 30px;
				border-bottom: 1px solid #ddd;
				line-height: 30px;
				padding-left: 10px;
			}
			
			.scroller .loading {
				height: 60px;
				line-height: 60px;
				text-align: center;
				width: 100%;
				background-color: #f1f1f1;
			}
			
			.scroller {
				-webkit-overflow-scrolling: touch;
			}
		</style>
	</head>

	<body>
		<div id="container" class="scroller">
			<div class="loading">
				下拉刷新数据
			</div>
			<ul>
				<li>
					<a href="#">列表数据1</a>
				</li>
				<li>
					<a href="#">列表数据2</a>
				</li>
				<li>
					<a href="#">列表数据3</a>
				</li>
				<li>
					<a href="#">列表数据4</a>
				</li>
				<li>
					<a href="#">列表数据5</a>
				</li>
				<li>
					<a href="#">列表数据6</a>
				</li>
				<li>
					<a href="#">列表数据7</a>
				</li>
				<li>
					<a href="#">列表数据8</a>
				</li>
				<li>
					<a href="#">列表数据9</a>
				</li>
				<li>
					<a href="#">列表数据10</a>
				</li>
				<li>
					<a href="#">列表数据11</a>
				</li>
				<li>
					<a href="#">列表数据12</a>
				</li>
				<li>
					<a href="#">列表数据13</a>
				</li>
				<li>
					<a href="#">列表数据14</a>
				</li>
				<li>
					<a href="#">列表数据15</a>
				</li>
				<li>
					<a href="#">列表数据16</a>
				</li>
				<li>
					<a href="#">列表数据17</a>
				</li>
				<li>
					<a href="#">列表数据18</a>
				</li>
				<li>
					<a href="#">列表数据19</a>
				</li>
				<li>
					<a href="#">列表数据20</a>
				</li>
				<li>
					<a href="#">列表数据21</a>
				</li>
				<li>
					<a href="#">列表数据22</a>
				</li>
				<li>
					<a href="#">列表数据23</a>
				</li>
				<li>
					<a href="#">列表数据24</a>
				</li>
				<li>
					<a href="#">列表数据25</a>
				</li>
				<li>
					<a href="#">列表数据26</a>
				</li>
				<li>
					<a href="#">列表数据27</a>
				</li>
				<li>
					<a href="#">列表数据28</a>
				</li>
				<li>
					<a href="#">列表数据29</a>
				</li>
				<li>
					<a href="#">列表数据30</a>
				</li>
			</ul>
		</div>

	</body>
	<script>
		var slide = function(option) {
			var defaults = {
				container: '',
				next: function() {}
			}
			var start,
				end,
				length,
				isLock = false, //是否锁定整个操作
				isCanDo = false, //是否移动滑块
				isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
				hasTouch = 'ontouchstart' in window && !isTouchPad;
			var obj = document.querySelector(option.container);
			var loading = obj.firstElementChild;
			var offset = loading.clientHeight;
			var objparent = obj.parentElement;
			/*操作方法*/
			var fn = {
				//移动容器
				translate: function(diff) {
					obj.style.webkitTransform = 'translate3d(0,' + diff + 'px,0)';
					obj.style.transform = 'translate3d(0,' + diff + 'px,0)';
				},
				//设置效果时间
				setTransition: function(time) {
					obj.style.webkitTransition = 'all ' + time + 's';
					obj.style.transition = 'all ' + time + 's';
				},
				//返回到初始位置
				back: function() {
					fn.translate(0 - offset);
					//标识操作完成
					isLock = false;
				},
				addEvent: function(element, event_name, event_fn) {
					if(element.addEventListener) {
						element.addEventListener(event_name, event_fn, false);
					} else if(element.attachEvent) {
						element.attachEvent('on' + event_name, event_fn);
					} else {
						element['on' + event_name] = event_fn;
					}
				}
			};

			fn.translate(0 - offset);
			fn.addEvent(obj, 'touchstart', start);
			fn.addEvent(obj, 'touchmove', move);
			fn.addEvent(obj, 'touchend', end);
			fn.addEvent(obj, 'mousedown', start)
			fn.addEvent(obj, 'mousemove', move)
			fn.addEvent(obj, 'mouseup', end)

			//滑动开始
			function start(e) {
				if(objparent.scrollTop <= 0 && !isLock) {
					var even = typeof event == "undefined" ? e : event;
					//标识操作进行中
					isLock = true;
					isCanDo = true;
					//保存当前鼠标Y坐标
					start = hasTouch ? even.touches[0].pageY : even.pageY;
					//消除滑块动画时间
					fn.setTransition(0);
					loading.innerHTML = '下拉刷新数据';
				}
				return false;
			}

			//滑动中
			function move(e) {
				if(objparent.scrollTop <= 0 && isCanDo) {
					var even = typeof event == "undefined" ? e : event;
					//保存当前鼠标Y坐标
					end = hasTouch ? even.touches[0].pageY : even.pageY;
					if(start < end) {
						even.preventDefault();
						//消除滑块动画时间
						fn.setTransition(0);
						//移动滑块
						if((end - start - offset) / 2 <= 150) {
							length = (end - start - offset) / 2;
							fn.translate(length);
						} else {
							length += 0.3;
							fn.translate(length);
						}
					}
				}
			}
			//滑动结束
			function end(e) {
				if(isCanDo) {
					isCanDo = false;
					//判断滑动距离是否大于等于指定值
					if(end - start >= offset) {
						//设置滑块回弹时间
						fn.setTransition(1);
						//保留提示部分
						fn.translate(0);
						//执行回调函数
						loading.innerHTML = '正在刷新数据';
						if(typeof option.next == "function") {
							option.next.call(fn, e);
						}
					} else {
						//返回初始状态
						fn.back();
					}
				}
			}
		}
		slide({
			container: "#container",
			next: function(e) {
				//松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
				var that = this;
				setTimeout(function() {
					that.back.call();
				}, 2000);
			}
		});
	</script>
</html>
